<template>
    <rx-dialog @handOk="handOk" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <a-form-model ref="form" :model="mdl" :rules="rules">
                    <a-row>
                        <a-col :span="24">
                            <a-form-model-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="$comi18('formDef.valueSource', '值来源')">
                                <a-radio-group :options="fromOptions" v-model="mdl.from" />
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row v-show="mdl.from=='custom'">
                        <a-col :span="24">
                            <a-form-model-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('option','选项')">
                                <div class="table-operator">
                                    <a-button @click="addRow">{{$ti18('rxList.add', '新增')}}</a-button>
                                    <a-button @click="removeRow">{{$ti18('rxList.delBtn','删除')}}</a-button>
                                    <a-button @click="upRow">{{$comi18('grid.up', '向上')}}</a-button>
                                    <a-button @click="downRow">{{$comi18('grid.down', '向下')}}</a-button>
                                </div>
                                <rx-grid ref="options"
                                         :bordered="true"
                                         :allowRowSelect="true"
                                         :multiSelect="true"
                                         style="min-height:340px;"
                                         :dataSource="customData"
                                         :columns="columns"
                                         :showPage="false">
                                  <span slot="label" slot-scope="{text,record,index}">
                                    <a-input v-model="record.label" />
                                  </span>
                                    <span slot="value" slot-scope="{text,record,index}">
                                    <a-input v-model="record.value" />
                                  </span>
                                </rx-grid>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row v-show="mdl.from=='dic'">
                        <a-col :span="24">
                            <a-form-model-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('dataDicItem','数据字典项')">
                                <a-tree-select v-model="mdl.dickey" :getPopupContainer='p=>p.parentNode'  :treeData="dicTree"></a-tree-select>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row v-show="mdl.from=='sql'">
                        <a-col :span="24">
                            <a-form-model-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('customSQL','自定义SQL')">
                                <rx-input-button ref="sql" @click="openCustomQuery" v-model="mdl.sql" />
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row v-show="mdl.from=='sql'">
                        <a-col :span="12">
                            <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('textField','文本字段')">
                                <a-select :getPopupContainer='p=>p.parentNode' :options="sqlFields" v-model="mdl.sql_textfield"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('numField','数值字段')">
                                <a-select :getPopupContainer='p=>p.parentNode' :options="sqlFields" v-model="mdl.sql_valuefield" />
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </a-form-model>
            </div>
        </rx-layout>
    </rx-dialog>

</template>

<script>
import {RxGrid,Util,Dialog,RxDialog,RxInputButton,RxLayout,BaseFormModel} from "@lowcode/jpaas-common-lib";
import SysTreeApi from "@/api/system/core/sysTree";
import FormCustomQueryApi from "@/api/form/core/formCustomQuery";

export default {
    name: "SelectSetting",
    props: ["layerid", "destroy","fields","dataSource"],
    mixins:[BaseFormModel],
    components:{
        RxGrid,
        RxInputButton,
        RxLayout,
        RxDialog
    },
    data() {
        return {
            labelCol: { span:6 },
            wrapperCol: { span:18 },
            labelCol1: { span:3 },
            wrapperCol1: { span:19 },
            mdl:{
                from:"custom",
                dickey:"",
                sql:"",
                sql_textfield:"",
                sql_valuefield:"",
            },
            rules: {
                from: [{required: true, message: this.$comi18('formDef.valueSource', '值来源','select'), trigger: 'change'}],
                dickey: [{required: false, message: this.i18n('dataDictionary','数据字典项') + this.i18n('required','必填'), trigger: 'change'}],
                sql: [{required: false, message: this.i18n('customSQL','自定义SQL') + this.i18n('required','必填'), trigger: 'change'}],
                sql_textfield: [{required: false, message: this.i18n('textField','文本字段') + this.i18n('required','必填'), trigger: 'change'}],
                sql_valuefield: [{required: false, message: this.i18n('numField','数值字段') + this.i18n('required','必填'), trigger: 'change'}]
            },
            opData:[{'value':'EQ','label':this.i18n('equal','等于')},
                {'value':'NEQ','label':this.i18n('notEqual','不等于')},
                {'value':'IN','label':this.i18n('include','包含')},
                {'value':'LK','label':this.i18n('fuzzyMatch','模糊匹配')},
                {'value':'LEK','label':this.i18n('leftMatch','左模糊匹配')},
                {'value':'RIK','label':this.i18n('rightMatch','右模糊匹配')}],
            fieldDatas:[],
            fromOptions:[{'value':'custom','label':this.i18n('custom','自定义')},
                {'value':'dic','label':this.i18n('dataDictionary','数据字典')},
                {'value':'sql','label':this.i18n('customSQL','自定义SQL')}],
            customData:[],
            columns:[
                {title: this.$ti18('rxList.index', '序号'), type: 'indexColumn', width: 80, dataIndex: 'serial', scopedSlots: {customRender: 'serial'}},
                {title: this.$ti18('rxForm.name', '名称'), dataIndex: 'label', width: 120,scopedSlots: {customRender: 'label'}},
                {title: this.$comi18('value','值'), dataIndex: 'value', width: 120,scopedSlots: {customRender: 'value'}}
            ],
            dicTree:[],
            curApp:{},
            sqlFields:[]
        }
    },
    created(){

        this.loadDicTree();
        if(this.dataSource){
            this.setData(this.dataSource,this.fields);
        }
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"codeGenSetting",key);
        },
        loadDicTree(){
            SysTreeApi.listDicTree(this.curApp.appId).then(res => {
                var cloneData = [];
                res.forEach(function(item) {
                    cloneData.push({
                        title: item.name,
                        key: item.treeId,
                        value: item.alias,
                        parentId: item.parentId
                    })
                })
                var treeData=Util.listToTree(cloneData,"key","parentId");
                this.dicTree = treeData;
            })
        },
        setData(data, fieldDats) {
            Object.assign(this.mdl,data);
            this.fieldDatas=fieldDats;
            this.mdl.form=data.form;
            this.mdl.dickey=data.dickey;
            var options=data.options || '[]';
            this.customData=JSON.parse(options);
            if(data.sql_key) {
                this.mdl.sql = '{value:\'' + data.sql_key + '\',text:\'' + data.sql_name + '\'}';
                this.getSqlByKey(data.sql_key);
                this.mdl.sql_textfield=data.textfield;
                this.mdl.sql_valuefield=data.valuefield;
            }
        },
        getData(){
            var obj={
                "from":this.mdl.from
            }
            if(this.mdl.from=='dic'){
                obj["dickey"]=this.mdl.dickey;
            }else if(this.mdl.from=='sql'){
                var sql = this.$refs.sql.getVal();
                obj["sql_key"]=sql.value;
                obj["sql_name"]=sql.text;
                obj["textfield"]=this.mdl.sql_textfield;
                obj["valuefield"]=this.mdl.sql_valuefield;
                obj["sqlDef"]=this.mdl.sql;
            }else {
                obj["options"]=JSON.stringify(this.$refs.options.getData());
            }
            return obj;
        },
        changeData(e,field){
            this.mdl[field]=e.target.checked;
        },
        addRow(){
            this.$refs.options.addRow();
        },
        removeRow(){
            this.$refs.options.removeRows();
        },
        upRow(){
            this.$refs.options.moveUp();
        },
        downRow(){
            this.$refs.options.moveDown();
        },
        openCustomQuery(vm){
            Dialog.openCustomDataDialog({
                curVm: this, widthHeight: ['1200px', '600px']
            }, function (self, data) {
                self.loadFields(data);
                vm.setVal(data.key,data.name);
            })
        },
        loadFields(row){
            var fieldStr=row.resultField;
            if(fieldStr) {
                var fileds = JSON.parse(fieldStr);
                var ary = fileds.map(function (item) {
                    return {
                        value: item.fieldName,
                        label: item.comment
                    }
                })
                this.sqlFields = ary;
            }
        },
        handOk(){
            var data= this.getData();
            Util.closeWindow(this, "ok",data);
        },
        cancel(){
            Util.closeWindow(this, "cancel");
        },
        getSqlByKey(sql_key) {
            if (sql_key) {
                FormCustomQueryApi.getByKey({key: sql_key}).then(res => {
                    if (res.success) {
                        this.loadFields(res.data);
                    }
                })
            }
        },
    }
}
</script>

<style scoped>

</style>